<template>
	<div>
		<!--<HeaderMsg></HeaderMsg>-->
		<div class="content">

			<div class="banner">
				<div class="left">
					<div class="avator"><img :src="userlogin.uface||'http://edu.ln139.com/face/small/118757170/1591836/0'" alt="头像" /></div>
					<div class="name">{{ userlogin.name }}</div>
					<div class="class">{{ userlogin.classname }}</div>
				</div>
				<div class="right">
					<p class="sentence">{{ catchphrase }}</p>
					<p class="author">——{{ author }}</p>
				</div>
			</div>
			<p>{{ selectDate }}</p>
			<div class="container">
				
				<ul v-if="haveData">
					<li>
						<div class="left"></div>
						<div class="middle">
							<p class="up">参与答题：{{ classInfo.studentMap.stuTests }}次</p>
							<p class="down">出题次数： {{ classInfo.studentMap.teaTests }}次</p>
						</div>
						<div class="right" @click="ToPath('questionDetail', classInfo.studentMap.stuTests)"></div>
					</li>
					<li>
						<div class="left"></div>
						<div class="middle">
							<p class="up">参与率：{{ classInfo.studentMap.ave_canyu }}</p>
							<p class="down">班级平均参与率：{{ classInfo.studentMap.class_ave_canyu }}</p>
						</div>
						<div class="right" @click="ToPath('particeRate', classInfo.studentMap.ave_canyu)"></div>
					</li>
					<li>
						<div class="left"></div>
						<div class="middle">
							<p class="up">正确率：{{ classInfo.studentMap.ave_zhengda }}</p>
							<p class="down">班级平均正确率：{{ classInfo.studentMap.class_ave_zhengda }}</p>
						</div>
						<div class="right" @click="ToPath('correctRate', classInfo.studentMap.ave_zhengda)"></div>
					</li>
				</ul>
				<div class="middleNav" v-if="haveData">
					<div class="left" @click="ToPath('callName', classInfo.studentMap.stuCallNames)">被点名{{ classInfo.studentMap.stuCallNames }}次</div>
					<div class="right" @click="ToPath('raceAnswer', classInfo.studentMap.stuCompetitive)">参与抢答{{ classInfo.studentMap.stuCompetitive }}次</div>
				</div>
				<div v-if="!haveData" class="noData">
					没有数据 我想静静
				</div>
				<div class="timeline" @click="timeline()" v-if="haveData">
					课堂时光轴
				</div>
				<div class="history" @click="openpicker()">历史数据</div>
				<mt-datetime-picker ref="picker" type="date" v-model="pickerValue" @confirm="chooseDate"> </mt-datetime-picker>
			</div>
		</div>
		<FooterMsg></FooterMsg>
	</div>
</template>
<script>import FooterMsg from '../../components/FooterMsg'
import HeaderMsg from '../../components/Header'
import api from '../../api'
import axios from 'axios'
import store from '../../store'
import { setStore, removeStore, getStore, seriDate } from '../../util/util'
import { mapMutations, mapState, mapActions } from 'vuex'
import { Toast, Indicator } from 'mint-ui';
import $ from 'jquery'
export default {
	name: 'class',
	components: {
		FooterMsg,
		HeaderMsg
	},
	computed: {
		...mapState(['userlogin'])
	},
	data() {
		return {
			msg: '',
			pickerValue: new Date(),
			classInfo: {},
			day: '',
			classInfo: {
				studentMap: {
					stuTests: 1
				}
			},
			obj: {},
			catchphrase: '',
			author: '',
			haveData: true,
			isFirstEnter: false, // 是否第一次进入，默认false
			selectDate: ''
		}
	},
	created() {

		Indicator.open({
			text: 'Loading...',
			spinnerType: 'triple-bounce'
		});
		this.selectDate = (new Date()).toLocaleDateString()
		this.isFirstEnter = true;
		this.INIT_STATE();
		var that = this;
		//本地开发打开此行代码
					this.login({
						uid: 4
					}).then(() => {
						that.day = that.seriDate(that.pickerValue.getTime());
						that.getStudentLessonrecords();
						console.log(that.userlogin)
					})
		//获取名言警句
		api.getStudentEduMotto({
			dayfrom: 0,
			dayto: 0
		}).then(response => {
			that.catchphrase = response.data.data[0].content;
			that.author = response.data.data[0].name;
			$(function() {
				$('.sentence').css('margin-top', (96 - $('.sentence').height()) / 2 + 'px')

			})
		})
		this.obj = this.getUrlVars(window.location.href)
		axios.get('http://web.skyeducation.cn/getUserinfo.php', {
			params: this.obj
		}).then(function(out) {
//			alert(out.data)
			that.msg = out.data;
			var obj = eval('(' + out.data + ')')
			obj = obj.data
			that.imgurl = obj.uface
			delete obj.education
					that.login({
						uid:obj.cpuid,
						uface: obj.uface,
						uname: obj.uname
					}).then(() => {
						that.day = that.seriDate(that.pickerValue.getTime());
						that.getStudentLessonrecords();
					})
			
		})
		
	},
	methods: {
		...mapMutations(['INIT_STATE']),
		...mapActions(['login']),
		openpicker() {
			this.$refs.picker.open()
		},
		chooseDate() {
			this.selectDate = this.pickerValue.toLocaleDateString()
			this.day = this.seriDate(this.pickerValue.getTime())
			this.getStudentLessonrecords()
		},
		getStudentLessonrecords() {
			console.log(this.userlogin)
			var that = this
			if(this.userlogin.uid==0){
				Indicator.close()
				this.$router.replace({
					path: '/notOrder'
				})
			}else{
				api.getStudentLessonrecords({
				studentid: this.userlogin.uid,
				classid: this.userlogin.classid,
				//day:this.seriDate(this.pickerValue.getTime())
				day: this.day
			}).then(response => {
				if(response.data.ret == '2' || response.data.ret == '0') {
					that.haveData = false
				} else {
					that.haveData = true;
					setStore('classInfo', response.data.data)
					that.classInfo = response.data.data
				}
				Indicator.close()
				$(function() {
//					var h = document.body.clientHeight;
//					$('.content').css('min-height', h - 53 + 'px')
//					var mh = parseInt((h - 99 - 120 - 60 * 3 - 40) / 5);
//					$('li').css('marginTop', mh + 'px')
//					$('.middleNav').css('marginTop', mh + 'px')
				})
			})
			}
			
		},
		timeline(){
			this.$router.push({
					path: `/timeLine/${this.day}`
				})
		},
		ToPath(path, x) {
			console.log(x)
			if(x && parseFloat(x) != 0) {
				this.$router.push({
					path: `/${path}/${this.day}`
				})

			} else {
				Toast('暂无数据');
			}
		},
		seriDate(_time) {
			var s = new Date(_time);
			var y = s.getFullYear();
			var m = s.getMonth() + 1;
			var d = s.getDate();
			return '' + y + (m >= 10 ? m : '0' + m) + (d >= 10 ? d : '0' + d)
		},
		getUrlVars(url) {
			var hash;
			var myJson = {};
			var hashes = url.slice(url.indexOf('?') + 1).split('&');
			var arr = [];
			for(var i = 0; i < hashes.length; i++) {
				hash = hashes[i].split('=');
				if(myJson.hasOwnProperty(hash[0])) {
					myJson[hash[0]] = myJson[hash[0]] + ',' + hash[1]
				} else {
					myJson[hash[0]] = hash[1]
				}
			}
			return myJson;
		}
	}
}</script>
<style scoped>div {
	font-size: 16px;
}

.content {
	padding-top: 0;
}

.content>p {
	margin: 0;
	margin-top: 10px;
}

.banner {
	height: 120px;
	display: flex;
	background: url(../../assets/images/classHead.png) no-repeat center;
	background-size: cover;
	font-size: 12px;
	color: white;
}

.banner>div {
	/*display: inline-block;*/
}

.banner>.left {
	flex: 2;
}

.banner>.left>div {
	margin: 0 auto;
	margin-top: 0.2rem;
}

.banner>.left>div.avator {
	width: 50px;
	height: 50px;
	border-radius: 50px;
	overflow: hidden;
}

.banner>.left>.name {
	font-size: 14px;
}

.banner>.left>.class {
	font-size: 12px;
	margin-top: 2px;
}

.banner>.right {
	flex: 5;
	font-size: 14px;
	font-weight: bold;
}

.banner>.right>p {
	padding-left: 10px;
	padding-right: 10px;
}

.banner>.right>.sentence {
	margin-top: 20px;
	margin-bottom: 0;
	text-align: left;
}

.banner>.right>.author {
	margin-top: 5px;
	text-align: right;
	margin-bottom: 0;
}

.container {
	margin-top: -10px;
}

.container>ul {
	padding: 0;
}

.container>ul>li {
	list-style: none;
	display: flex;
	height: 1.2rem;
	width: 6.72rem;
	margin: 0 auto;
	border-radius: 8px;
	margin-top: 25px;
	box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.3);
	background-color: white;
}

.container>ul>li>div {}

.container>ul>li>.left {
	flex: 2;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 0.8rem;
}

.container>ul>li:nth-of-type(1)>.left {
	background-image: url(../../assets/images/classPractice.png);
}

.container>ul>li:nth-of-type(2)>.left {
	background-image: url(../../assets/images/classPartice.png);
}

.container>ul>li:nth-of-type(3)>.left {
	background-image: url(../../assets/images/classCorrect.png);
}

.container>ul>li>.middle {
	flex: 5;
	padding-top: 8px;
}

.container>ul>li>.middle>p {
	text-align: left;
	line-height: 24px;
	margin: 0;
}

.container>ul>li>.middle>p.up {
	font-size: 15px;
	color: #3C3C3C;
}

.container>ul>li>.middle>p.down {
	font-size: 12px;
	color: #A5A5A5;
	letter-spacing: -0.25px;
}

.container>ul>li>.right {
	flex: 4;
	line-height: 1.2rem;
	background: url(../../assets/images/watchDetail.png) no-repeat;
	background-size: 1.6rem;
	background-position: center;
}

.middleNav {
	display: flex;
	justify-content: space-around;
	height: 0.8rem;
	line-height: 0.8rem;
	font-size: 15px;
	color: #FA8C13;
}

.middleNav>div {
	width: 3rem;
	height: 40px;
	box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.3);
	border-radius: 0.4rem;
	background-size: 20%;
	background-repeat: no-repeat;
	background-position: 5px 50%;
	line-height: 40px;
	text-indent: 0.43rem;
	background-color: white;
}

.middleNav>.right {
	background-image: url(../../assets/images/raceAnswer.png);
}

.middleNav>.left {
	background-image: url(../../assets/images/callName.png);
}

.noData {
	height: 250px;
	background: url(../../assets/images/noData.png) no-repeat center;
	background-size: 77px;
	color: #3C3C3C;
	font-size: 14px;
	line-height: 400px;
}
.timeline:before{
	content: "";
	position: absolute;
	left:-0.51rem;
	top: -16.5px;
	background: url(../../assets/images/timeTitle.png) no-repeat center;
	display: inline-block;
	background-size: contain;
	height: 50.5px;
	width:0.77rem;
}
.timeline{
	position: relative;
	margin: 0 auto;
	background: url(../../assets/images/timeBorder.png) no-repeat center;
	height: 30px;
	width:2.77rem;
	line-height: 30px;
	background-size: contain;
	font-size: 14px;
	color: #4A4A4A;
	margin-top: 38px;
}
.history {
	width: 1.44rem;
	height: 22px;
	margin: 0 auto;
	margin-top: 25px;
	margin-bottom: 42.5px;
	left: calc(50% - 0.72rem);
	bottom: 63px;
	color: #f6ab3e;
	border: 1px solid #f6ab3e;
	font-size: 12px;
	line-height: 22px;
	border-radius: 4px;
}</style>